<template>
	<view class="cate">
		<!-- 商品分类列表 -->
		<view class="play-list">
			<view class="item" 
				v-for="(category, index) in categories" 
				:key="index"
				:class="{ active: currentCategory === category.id }" 
				@tap="selectCategory(category.id)">
				{{ category.name }}
			</view>
		</view>
		<!-- 游玩列表 -->
		<scroll-view class="play-items" scroll-y>
			<view class="item2" v-for="(item, index) in playItems" :key="index" @tap="nav(index)">
				<view class="pic">
					<image class="item-image" mode="aspectFill" :src="item.url" />
				</view>
				<view class="msg">
					<view class="name">{{ item.name }}</view>
					<view class="intro">{{ item.intro }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { CONFIG } from '../../utils/config';

	const currentCategory = ref('play'); // 当前选中的分类标识符
	const playList = ref([]);
	const playItems = ref([]);

	const categories = ref([
		{ id: 'play', name: '游玩' },
		{ id: 'food', name: '美食' },
		// 可以在这里添加第三个分类
	]);

	onLoad(() => {
		getPlayItems('play'); // 默认加载游玩列表
	});

	

	async function getPlayItems(category) {
		if (category === 'play') {
			let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/play");
			console.log(res);
			playItems.value = res.results;
		} else if (category === 'food') {
			let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/play2");
			console.log(res);
			playItems.value = res.results;
		}
		// 可以在这里添加第三个分类的请求逻辑
	}

	function selectCategory(id) {
		currentCategory.value = id; // 更新当前选中的分类标识符
		getPlayItems(id); // 根据选中的分类标识符请求数据
	}
	
	// 点击景点
	function nav(index){
		console.log("点击了景点"+index)
		// 跳转
		uni.navigateTo({
			url:"/pages/details/details?id="+index
		})
	}
</script>

<style>

</style>
